<template>
  <div class="home">
    <div class="search">
      <el-input class="search_input" placeholder="请输入名称" v-model="params.username"></el-input>
      <el-input class="search_input" placeholder="请输入手机" v-model="params.phome"></el-input>
      <el-input class="search_input" placeholder="请输入邮箱" v-model="params.email"></el-input>
      <el-button type="primary" icon="el-icon-search" @click="load">搜索</el-button>
      <el-button type="warning" icon="el-icon-search" @click="clearSearch">清空</el-button>
    </div>

    <el-table :data="tableData">
      <el-table-column prop="username" label="会员号">
      </el-table-column>
      <el-table-column prop="password" label="密码">
      </el-table-column>
      <el-table-column prop="phone" label="电话">
      </el-table-column>
      <el-table-column prop="email" label="地址">
      </el-table-column>
      <el-table-column prop="createtime" label="创建时间">
      </el-table-column>
      <el-table-column prop="updatetime" label="更新时间">
      </el-table-column>
      <el-table-column prop="status" label="状态">
        <template v-slot="scope">
          <el-switch v-model="scope.row.status" active-color="#13ce66" inactive-color="#ff4949"
            @change="changeStatus(scope.row)">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="300">
        <template v-slot="scope">
          <el-button size="mini" type="primary" @click="$router.push('/layout/edit-admin?id=' + scope.row.id)">修改</el-button>
          <template>
            <el-popconfirm style="margin-left:10px" title="确定删除吗？" @confirm="del(scope.row.id)">
              <el-button size="mini" type="danger" slot="reference">删除</el-button>
            </el-popconfirm>
          </template>
          <el-button size="mini" type="warning" style="margin-left:10px;" @click="handleChangePassword(scope.row)">修改密码
          </el-button>
          <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
            <el-form :model="form" :rules="rules" ref="form">
              <el-form-item label="修改密码" prop="newPass">
                <el-input v-model="form.newPass" type="text" show-password placeholder="请输入新密码"></el-input>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="saveChangePassword">确 定</el-button>
            </span>
          </el-dialog>
        </template>
      </el-table-column>
    </el-table>

    <div class="page">
      <el-pagination :page-size="params.pageSize" :current-page="params.pageNum" @current-change="changeCurrentPage"
        background layout="prev, pager, next" :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      form: {},
      admin: sessionStorage.getItem('admin') ? JSON.parse(sessionStorage.getItem('admin')) : {},
      rules: {
        newPass: [
          { required: true, message: '请输入密码', trigger: 'blur' },
        ],
      },
      dialogVisible: false,
      tableData: [],
      total: 0,
      params: {
        username: '',
        phone: '',
        email: '',
        pageNum: 1,
        pageSize: 5
      }
    }
  },
  created() {
    this.load();
  },
  methods: {
    changeStatus(row) {
      if(this.admin.id === row.id && !row.status){
        this.$notify.warning('不允许禁用当前用户');
        row.status = true;
        return;
      }
      this.request.put("/api/admin/update", row).then(res => {
        if (res.code === '200') {
          this.$notify.success("更新成功");
        } else {
          this.$notify.error("更新失败");
        }

        this.form = {};
      })

    },
    load() {
      this.request.get("/api/admin/page", { params: this.params }).then(res => {
        if (res.code === '200') {
          this.tableData = res.data.list;
          console.log(this.tableData)
          this.total = res.data.total;
        }
      })
    },
    changeCurrentPage(index) {
      this.params.pageNum = index;
      this.load();
    },
    del(id) {
      this.request.delete("/api/admin/delete/" + id).then(res => {
        if (res.code === '200') {
          this.$notify.success("删除成功");
          this.params.pageNum = 1;
          this.load();
        }
      })
    },
    clearSearch() {
      this.params = {};
    },
    handleChangePassword(row) {
      this.dialogVisible = !this.dialogVisible;
      this.form = JSON.parse(JSON.stringify(row));
    },
    saveChangePassword() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.request.put('/api/admin/password/', this.form).then(res => {
            if (res.code === '200') {
              this.$notify.success('修改成功');
              console.log(this.form.id);
              console.log(this.admin.id);
              if (this.form.id === this.admin.id) {
                sessionStorage.removeItem('admin');
                this.$router.push('/login');
              }
            } else {
              this.$notify.error('修改失败');
            }

            this.dialogVisible = !this.dialogVisible;
          })
        }
      })
    }
  }
}
</script>


<style lang="scss" scoped>
.home {
  .search {
    display: flex;
    margin: 10px 0;

    .search_input {
      width: 20%;
      margin-right: 10px;
    }
  }

  .page {
    display: flex;
    justify-content: center;
    margin: 20px 0;
  }
}
</style>